<template>
  <div>
    <el-card class="operator-button-card">
      <template #header>
        <div class="flex justify-between items-center">
          <h2 class="operator-button-label">{{ $t('operator.resetMapBtn') }}</h2>
          <div>
            <el-button
              v-if="isAuth('10400202.MANAGE')"
              type="primary"
              size="small"
              :loading="mapLoading"
              @click="saveMapHandle"
              >{{ $t('common.save') }}
            </el-button>
          </div>
        </div>
      </template>
      <el-form ref="dataForm" :model="mapForm" label-width="250px" style="font-size: 14px;font-weight: 500;">
        <el-form-item :label="$t('operator.mapType') + ':'">
          <el-select
            v-model="mapForm.mapType"
            prop="mapType"
            @change="mapSelect"
            style="width: 400px"
          >
            <el-option
              v-for="item in mapList"
              :key="item.mapType"
              :value="item.mapType"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('operator.mapKey') + ':'"
          prop="mapKey"
          width="100%"
        >
          <div>
            <el-radio v-model="radio" label="1" @change="changeMapKey">{{
              $t('operator.defaulTag')
            }}</el-radio>
          </div>
          <div>
            <el-radio v-model="radio" label="2" @change="changeMapKey">
              <el-input
                v-model="mapForm.mapKey"
                placeholder="key"
                maxlength="128"
                show-word-limit
                style="width: 376px"
                clearable
                @blur="() => (mapForm.mapKey = mapForm.mapKey.trim())"
            /></el-radio>
          </div>
        </el-form-item>
        <el-form-item
          v-if="showGpsTrans"
          :label="$t('operator.station_wifi_to_gps') + ':'"
        >
          <el-switch v-model="openGpsTransFlag" @change="changeTrans">
          </el-switch>
        </el-form-item>
        <el-form-item
          v-if="showGpsTransConfig"
          :label="$t('operator.request_frequency_cycle') + ':'"
        >
          <el-radio-group v-model="mapForm.requestFrequencyCycle">
            <el-radio :label="1">{{
              $t('operator.request_frequency_list.1_hour')
            }}</el-radio>
            <el-radio :label="4">{{
              $t('operator.request_frequency_list.4_hour')
            }}</el-radio>
            <el-radio :label="8">{{
              $t('operator.request_frequency_list.8_hour')
            }}</el-radio>
            <el-radio :label="24">{{
              $t('operator.request_frequency_list.24_hour')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="showGpsTransConfig"
          :label="$t('operator.billing_type') + ':'"
        >
          <el-radio-group
            v-model="mapForm.billingType"
            @change="changeBillingType"
          >
            <el-radio :label="1" :disabled="billingTypeDisabled">{{
              $t('operator.billing_type_list.count')
            }}</el-radio>
            <el-radio :label="2" :disabled="billingTypeDisabled">{{
              $t('operator.billing_type_list.buy_out')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getMapList } from '@/utils'
import { configureMap } from '@/api/operator'
import { isAuth } from '@/utils'

export default {
  props: {
    operatorId: {
      require: true,
      type: String,
      default: null
    },
    operator: Object
  },
  data() {
    return {
      mapLoading: false,
      mapForm: {
        mapType: '',
        mapKey: '',
        openGpsTrans: 0,
        requestFrequencyCycle: 1,
        billingType: 1
      },
      radio: '1',
      showGpsTrans: false,
      showGpsTransConfig: false,
      billingTypeDisabled: false,
      openGpsTransFlag: false
    }
  },
  created() {
    this.mapList = getMapList()
  },
  mounted() {
    this.mapForm.mapType = this.operator.mapType
    this.radio = this.operator.isDefaultMapRadio
    if (this.radio === '1') {
      this.mapForm.mapKey = null
    } else {
      this.mapForm.mapKey = this.operator.mapKey
    }
    if (this.operator.mapType === 'GOOGLE') {
      this.showGpsTrans = true
      if (this.operator.openGpsTrans === 1) {
        this.openGpsTransFlag = true
        this.showGpsTransConfig = true
        this.mapForm.openGpsTrans = this.operator.openGpsTrans
        this.mapForm.requestFrequencyCycle = this.operator.requestFrequencyCycle
        this.mapForm.billingType = this.operator.billingType
      }
    } else {
      this.showGpsTrans = false
    }
    // this.initKey()
  },
  methods: {
    saveMapHandle() {
      if (this.radio === '2' && this.mapForm.mapKey === '') {
        this.$confirm(this.$t('operator.map_not_null'), this.$t('page.tip'), {
          confirmButtonText: this.$t('page.confirm'),
          cancelButtonText: this.$t('page.cancel'),
          type: 'warning'
        })
        return
      }
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm(this.$t('operator.save_cfg'), this.$t('page.tip'), {
            confirmButtonText: this.$t('page.confirm'),
            cancelButtonText: this.$t('page.cancel'),
            type: 'warning'
          })
            .then(() => {
              this.mapLoading = true
              const mapBody = {}
              mapBody.mapType = this.mapForm.mapType
              if (this.radio === '1') {
                mapBody.isDefaultMapKey = true
                mapBody.mapKey = null
              } else {
                mapBody.isDefaultMapKey = false
                mapBody.mapKey = this.mapForm.mapKey
              }
              mapBody.openGpsTrans = this.mapForm.openGpsTrans
              mapBody.requestFrequencyCycle = this.mapForm.requestFrequencyCycle
              mapBody.billingType = this.mapForm.billingType
              configureMap(this.operatorId, mapBody)
                .then((data) => {
                  this.$message({
                    type: 'success',
                    message: this.$t('common.success')
                  })
                  this.mapLoading = false
                })
                .catch((e) => {
                  this.$confirmError(e)
                  this.mapLoading = false
                })
            })
            .catch(() => {})
        }
      })
    },
    mapSelect() {
      this.mapForm.mapKey = ''
      if (this.mapForm.mapType === 'GOOGLE') {
        this.showGpsTrans = true
        this.radio = '1'
        if (this.mapForm.openGpsTrans === 1) {
          this.showGpsTransConfig = true
        }
      } else {
        this.showGpsTrans = false
        this.showGpsTransConfig = false
      }
    },
    changeMapKey() {
      if (this.radio === '2') {
        this.mapForm.billingType = 2
        this.billingTypeDisabled = true
      } else {
        this.billingTypeDisabled = false
      }
    },
    changeTrans(value) {
      console.log(this.openGpsTransFlag)
      if (value) {
        this.mapForm.openGpsTrans = 1
        this.showGpsTransConfig = true
      } else {
        this.mapForm.openGpsTrans = 0
        this.showGpsTransConfig = false
      }
    },
    changeBillingType() {
      console.log(this.mapForm.billingType)
      console.log(this.mapForm.requestFrequencyCycle)
    },
    initKey() {
      if (this.operator.mapKey !== this.getSelectNewlandKey()) {
        this.radio = '2'
        this.mapForm.mapKey = this.operator.mapKey
      } else {
        this.radio = '1'
      }
    },
    getSelectNewlandKey() {
      if (this.mapForm.mapType === 'MAP_BOX') {
        return this.mapList[0].mapKey
      } else if (this.mapForm.mapType === 'GOOGLE') {
        return this.mapList[1].mapKey
      } else if (this.mapForm.mapType === 'BAIDU') {
        return this.mapList[2].mapKey
      }
    },
    isAuth
  }
}
</script>

<style lang="scss" scoped>
.l-card {
  margin: 20px 36px;
}
</style>
